﻿
.slideshow { position: relative; width: 100%; height: 600px; overflow: hidden; }
.slideshow-image { position: absolute; top: 0px; left: 0px; width: 100%; height: 600px; background: no-repeat 50% 50%; background-size: cover; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-duration: 24s; animation-duration: 24s; opacity: 1; -webkit-transform: scale(1.2); transform: scale(1.2); }
.slideshow1 { -webkit-animation-name: kenburns-1; animation-name: kenburns-1; z-index: 3; }
.slideshow2 { -webkit-animation-name: kenburns-2; animation-name: kenburns-2; z-index: 2; opacity: 0; }
.slideshow3 { -webkit-animation-name: kenburns-3; animation-name: kenburns-3; z-index: 1; opacity: 0; }

@-webkit-keyframes kenburns-1 {
    0% { opacity: 1; -webkit-transform: scale(1.2); transform: scale(1.2); }
    30% { opacity: 1; }
    33% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); }
    97% { opacity: 0; }
    97.1% { opacity: 1; -webkit-transform: scale(1.25); transform: scale(1.25); }
}

@keyframes kenburns-1 {
    0% { opacity: 1; -webkit-transform: scale(1.2); transform: scale(1.2); }
    30% { opacity: 1; }
    33% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); }
    97% { opacity: 0; }
    97.1% { opacity: 1; -webkit-transform: scale(1.2); transform: scale(1.2); }
}

@-webkit-keyframes kenburns-2 {
    32% { opacity: 1; -webkit-transform: scale(1.2); transform: scale(1.2); }
    63% { opacity: 1; }
    66% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); }
    100% { opacity: 0; -webkit-transform: scale(1.2); transform: scale(1.2); }
}

@keyframes kenburns-2 {
    32% { opacity: 1; -webkit-transform: scale(1.2); transform: scale(1.2); }
    63% { opacity: 1; }
    66% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); }
    100% { opacity: 0; -webkit-transform: scale(1.2); transform: scale(1.2); }
}

@-webkit-keyframes kenburns-3 {
    65% { opacity: 1; -webkit-transform: scale(1.2); transform: scale(1.2); }
    97% { opacity: 1; }
    100% { opacity: 0; -webkit-transform: scale(1.2); transform: scale(1.2); }
}

@keyframes kenburns-3 {
    65% { opacity: 1; -webkit-transform: scale(1.2); transform: scale(1.2); }
    97% { opacity: 1; }
    100% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); }
}


@media only screen and (max-width:1200px) {
    .slideshow { height: 450px; }
        .slideshow .slideshow-image { height: 450px; }
}


@media only screen and (max-width:1024px) {
    .slideshow { height: 415px; }
        .slideshow .slideshow-image { height: 450px; }
}

@media only screen and (max-width:960px) {
    .slideshow { height: 330px; }
        .slideshow .slideshow-image { height: 330px; }
}

@media only screen and (max-width:768px) {
    .slideshow { height: 210px; }
        .slideshow .slideshow-image { height: 210px; }
}

@media only screen and (max-width:480px) {
    .slideshow { height: 160px; }
        .slideshow .slideshow-image { height: 160px; }
}






.indexserverbigbox { margin: 80px auto; background-image: url('../images/home/bg1.jpg'); background-size: cover; background-repeat: no-repeat; padding: 55px 0px; background-attachment: fixed; }
    .indexserverbigbox .indexserver { max-width: 1200px; }
        .indexserverbigbox .indexserver ul { width: 100%; font-size: 0px; vertical-align: top; }
            .indexserverbigbox .indexserver ul li { background-image: none; background-color: #fff; padding: 35px; display: inline-block; width: 50%; max-width: 400px; margin: 0px 75px; -moz-transition: all, 0.5s; -webkit-transition: all, 0.5s; -o-transition: all, 0.5s; transition: all, 0.5s; }
                .indexserverbigbox .indexserver ul li .pic { background-image: url('../images/home/s1.png'); width: 264px; height: 264px; background-repeat: no-repeat; }

                .indexserverbigbox .indexserver ul li .title { font-size: 32px; color: #333; padding: 35px 0px; }
                .indexserverbigbox .indexserver ul li a { color: #fff; font-size: 18px; padding: 8px 24px; background-color: #18ac1b; border-radius: 2px; }


                .indexserverbigbox .indexserver ul li:hover { background-image: url('../images/home/s3.jpg'); }
                    .indexserverbigbox .indexserver ul li:hover .pic { background-image: url('../images/home/s2.png'); }
                    .indexserverbigbox .indexserver ul li:hover .title { color: #fff; }
                    .indexserverbigbox .indexserver ul li:hover a { background-color: #ffffff; color: #18ac1b; }






@media only screen and (max-width:1200px) {
    .indexserverbigbox .indexserver ul li { padding: 35px 25px; margin: 0px 45px; }
}



@media only screen and (max-width:1024px) {
    .indexserverbigbox .indexserver ul li { padding: 35px 20px; margin: 0px 45px; max-width: 360px; }
}




@media only screen and (max-width:960px) {

    .indexserverbigbox .indexserver ul li { padding: 35px 15px; margin: 0px 20px; max-width: 320px; }
        .indexserverbigbox .indexserver ul li .pic { width: 200px; height: 200px; background-size: cover; }
}


@media only screen and (max-width:768px) {
    .indexserverbigbox .indexserver ul li { padding: 35px 15px; margin: 0px 20px; max-width: 260px; }
        .indexserverbigbox .indexserver ul li .pic { width: 160px; height: 160px; }
        .indexserverbigbox .indexserver ul li .title { font-size: 24px; }
}



@media only screen and (max-width:640px) {
    .indexserverbigbox .indexserver ul li { padding: 35px 10px; margin: 0px 10px; max-width: 210px; }
        .indexserverbigbox .indexserver ul li .pic { width: 120px; height: 120px; }
        .indexserverbigbox .indexserver ul li .title { font-size: 24px; padding: 15px 0px; }
        .indexserverbigbox .indexserver ul li a { font-size: 14px; }
}

@media only screen and (max-width:480px) {
    .indexserverbigbox .indexserver ul li { padding: 35px 10px; margin: 10px 10px; max-width: 130px; }
        .indexserverbigbox .indexserver ul li .pic { width: 80px; height: 80px; }
        .indexserverbigbox .indexserver ul li .title { font-size: 16px; }
}




.indexproductbigbox { background-color: #272936; border-top: solid 1px #c1c1c1; border-bottom: solid 1px #c1c1c1; padding: 7px 0px; }
    .indexproductbigbox .indexproduct { max-width: 1200px; width: 100%; font-size: 0px; vertical-align: top; text-align: left; }
        .indexproductbigbox .indexproduct .left { display: inline-block; width: 33%; padding: 75px 40px; vertical-align: top; }
            .indexproductbigbox .indexproduct .left .title { font-size: 36px; text-transform: uppercase; color: #fff; }

            .indexproductbigbox .indexproduct .left .subtitle { margin-top: 15px; margin-left: 3px; font-size: 32px; color: #e4ffe5; line-height: 70px; border-left: 2px solid #e4ffe5; padding-left: 50px; }
            .indexproductbigbox .indexproduct .left .text { margin-top: 30px; text-indent: 2em; font-size: 20px; line-height: 34px; color: #fff; }


        .indexproductbigbox .indexproduct .right { display: inline-block; width: 66%; }
            .indexproductbigbox .indexproduct .right ul { width: 100%; font-size: 0px; text-align: left; vertical-align: top; }
                .indexproductbigbox .indexproduct .right ul li { text-align: center; border: solid 1px #c1c1c1; padding: 60px 0px; font-size: 32px; vertical-align: top; display: inline-block; width: 48%; margin: 1%; background-color: #fff; -moz-transition: all, 0.5s; -webkit-transition: all, 0.5s; -o-transition: all, 0.5s; transition: all, 0.5s; }

                    .indexproductbigbox .indexproduct .right ul li .pic { background-size: cover; background-repeat: no-repeat; }
                    .indexproductbigbox .indexproduct .right ul li .pic1 { background-image: url('../images/home/p1.png'); width: 66px; height: 66px; }
                    .indexproductbigbox .indexproduct .right ul li .pic2 { background-image: url('../images/home/p2.png'); width: 66px; height: 66px; }
                    .indexproductbigbox .indexproduct .right ul li .pic3 { background-image: url('../images/home/p3.png'); width: 66px; height: 66px; }
                    .indexproductbigbox .indexproduct .right ul li .pic4 { background-image: url('../images/home/p4.png'); width: 66px; height: 66px; }

                    .indexproductbigbox .indexproduct .right ul li .title { font-size: 32px; margin-top: 40px; }


                    .indexproductbigbox .indexproduct .right ul li:hover { background-color: #18ac1b; border: solid 1px #18ac1b; }
                        .indexproductbigbox .indexproduct .right ul li:hover .pic1 { background-image: url('../images/home/pa1.png'); }
                        .indexproductbigbox .indexproduct .right ul li:hover .pic2 { background-image: url('../images/home/pa2.png'); }
                        .indexproductbigbox .indexproduct .right ul li:hover .pic3 { background-image: url('../images/home/pa3.png'); }
                        .indexproductbigbox .indexproduct .right ul li:hover .pic4 { background-image: url('../images/home/pa4.png'); }
                        .indexproductbigbox .indexproduct .right ul li:hover .title { color: #fff; }



@media only screen and (max-width:1024px) {
    .indexproductbigbox .indexproduct .left .title { font-size: 26px; }
    .indexproductbigbox .indexproduct .left .subtitle { font-size: 22px; }
    .indexproductbigbox .indexproduct .left .text { font-size: 18px; }
}



@media only screen and (max-width:960px) {
    .indexproductbigbox .indexproduct .left { width: 40%; }
        .indexproductbigbox .indexproduct .left .title { font-size: 26px; }
        .indexproductbigbox .indexproduct .left .subtitle { font-size: 22px; }
        .indexproductbigbox .indexproduct .left .text { font-size: 18px; }

    .indexproductbigbox .indexproduct .right { width: 60%; }
}




@media only screen and (max-width:768px) {
    .indexproductbigbox .indexproduct .left { width: 40%; padding: 45px 20px; }
        .indexproductbigbox .indexproduct .left .title { font-size: 18px; }
        .indexproductbigbox .indexproduct .left .subtitle { font-size: 16px; line-height: 40px; }
        .indexproductbigbox .indexproduct .left .text { font-size: 14px; }

    .indexproductbigbox .indexproduct .right { width: 60%; }
        .indexproductbigbox .indexproduct .right ul li { padding: 40px 0px; }
            .indexproductbigbox .indexproduct .right ul li .title { font-size: 18px; margin-top: 30px; }
}



@media only screen and (max-width:480px) {
    .indexproductbigbox .indexproduct .left { width: 100%; padding: 30px 20px; }
        .indexproductbigbox .indexproduct .left .title { font-size: 18px; }
        .indexproductbigbox .indexproduct .left .subtitle { font-size: 16px; line-height: 30px; }
        .indexproductbigbox .indexproduct .left .text { font-size: 14px; margin-top: 10px; line-height: 26px; }

    .indexproductbigbox .indexproduct .right { width: 100%; }
        .indexproductbigbox .indexproduct .right ul li { padding: 40px 0px; }
            .indexproductbigbox .indexproduct .right ul li .title { font-size: 18px; margin-top: 30px; }
}




.indexjoinbigbox { margin: 80px auto 30px auto; width: 100%; padding: 0px 0px; }
    .indexjoinbigbox .indexjoin { width: 100%; }
        .indexjoinbigbox .indexjoin img { width: 100%;max-width:1920px; }




@media only screen and (max-width:768px) {
    .indexjoinbigbox .indexjoin { height: 240px; }
}
